<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>澳宝管理系统</title>
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ocupload-1.1.2.js"></script>
    <script type="text/javascript" src="/js/jquery_ocupload.js"></script>
    <script type="text/javascript" src="/js/datagrid-detailview.js"></script>
    <link id="systemthemeLink" rel="stylesheet" href="/easyui/themes/bootstrap/easyui.css" type="text/css">
    <link rel="stylesheet" href="/easyui/themes/color.css" type="text/css">
    <link rel="stylesheet" href="/easyui/themes/icon.css" type="text/css">
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css">
<!--    <link href="/css/easyui1.7/themes/easyui_animation.css" rel="stylesheet" type="text/css">-->
    <script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/easyui/datagrid-cellediting.js"></script>
    <script type="text/javascript" src="/js/jquery.ocupload-1.1.2.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/globalField.js"></script>
    <script type="text/javascript" src="/js/jquery-migrate-1.2.1.js"></script>
    <script type="text/javascript" src="/js/jQuery.print.min.js"></script>
    <script type="text/javascript" src="/js/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="/js/datagrid-groupview.js"></script>
    <script src="/js/grhtml5-1.0.0beta-min.js" type="text/javascript"></script>
    <script src="/js/grhtml5-6.7-min.js" type="text/javascript"></script>
    <script src="/js/grwebapp.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/datagrid-export.js"></script>
    <script src="/layui-v2.5.6/layui.js" ></script>
    <link rel="stylesheet" href="/layui-v2.5.6/css/layui.css">
    <link rel="stylesheet" href="/css/opal_common.css">
    <link rel="stylesheet" href="/css/index.css">
    <style type="text/css">

        /*文字css*/
        .indexFont {
            margin: 0;
            text-align:center;
            font: bold 60px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #fff;
            text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 15px 15px rgba(0, 0, 0, 0.15);
            -webkit-transition: .2s all linear;
        }
        .tree-title {
            font-size: 16px;
            font-weight: 600;
        }
        .index_ave_font{
            font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
            font-weight: bold;
            text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
            color: #f1ebe5;
            font-size: 25px;
        }
        .index_milky {
            text-transform: uppercase;
            display: block;
            font-size: 35px;
            letter-spacing: -4px;
            text-align: center;
            background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
            position: absolute;
            padding: 50px 100px;
            top: 50%;
            left: 20%;
            transform: translate(-50%,-50%);
            border-radius: 20px;
        }
    </style>
</head>

<body>
<div id="cc" class="easyui-layout" data-options="fit:'true'">
    <div data-options="region:'north',border:false" style="background-color:#e9dfd1;height:50px; line-height: 50px">
        <div id="index_top">
            <div class="north_left" style="float: left;width:30%;text-align: center">
                <h1 class="index_milky index_ave_font">澳宝管理系统</h1>
            </div>
            <div class="north_right" style="float: right">
                <div class="north_content">
                    <a data-options="iconCls:'icon-tip',menu:'#systemThemeContent'" class="easyui-menubutton">
								<h3 class="index_ave_font">主题</h3>
                    </a>
                    <a data-options="iconCls:'icon-man',menu:'#content'" class="easyui-menubutton">
							<span th:if="${session.user} != null">
								<h3 class="index_ave_font" id="indexSessionUserName" th:text="${session.user.userName}"></h3>
							</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div data-options="region:'west',title:'<span class=\'indexFont\' style=\'font-size:20px;padding-left:30%\'>菜单</span>',border:false,collapsible:false"
         style="width:200px; background-color: #f1ebe5">
        <ul id="index_tree"></ul>
    </div>
    <div data-options="region:'center',border:false" style="padding:5px;background:#eee;">
        <div id="mytabs" data-options="fit:'true',border:false,onLoad:myTabsOnLoad" class="easyui-tabs">
            <div title="<span class='indexFont' style='font-size:20px'>首页</span>" style="background-color:#f1ebe5;display: none;position: relative">
                <div class="indexFont">
                    <span th:if="${session.user} != null"style="color: #00FF00">
                        <input style="display: none" id="indexUserId" th:value="${session.user.userId}">
                        <input style="display: none" id="indexUserName" th:value="${session.user.userName}">
                        <input style="display: none" id="indexUserHrorgPkhrorg" th:value="${session.user.hrorgPkhrorg}">
                        <input style="display: none" id="indexUserPkOrg" th:value="${session.user.pkOrg}">
                        <input style="display: none" id="indexUserPosition" th:value="${session.user.userPosition}">
                        <h3 style="display: inline;" th:text="${session.user.userName}"></h3>
                    </span>
                    ，欢迎您!
                </div>
                    <div class="index_cubeBox">
                        <!-- 小立方 -->
                        <ul class="index_cube">
                            <li><img src="/image/opal.jpg"></li>
                            <li><img src="/image/opal.jpg"></li>
                            <li><img src="/image/opal.jpg"></li>
                            <li><img src="/image/opal.jpg"></li>
                            <li><img src="/image/opal.jpg"></li>
                            <li><img src="/image/opal.jpg"></li>
                        </ul>
                        <!-- 大立方 -->
                        <ul class="index_cube index_bigCube">
                            <li><img src="/image/opal.jpg" class="index_bigCubeImg"></li>
                            <li><img src="/image/opal.jpg" class="index_bigCubeImg"></li>
                            <li><img src="/image/opal.jpg" class="index_bigCubeImg"></li>
                            <li><img src="/image/opal.jpg" class="index_bigCubeImg"></li>
                            <li><img src="/image/opal.jpg" class="index_bigCubeImg"></li>
                            <li><img src="/image/opal.jpg" class="index_bigCubeImg"></li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
    <div id="systemThemeContent">
        <div theme="/easyui/themes/ui-pepper-grinder/easyui.css" onclick="changeTheme(this)" >主题一</div>
        <div theme="/easyui/themes/ui-cupertino/easyui.css" onclick="changeTheme(this)" >主题二</div>
        <div theme="/easyui/themes/ui-dark-hive/easyui.css" onclick="changeTheme(this)" >主题三</div>
        <div theme="/easyui/themes/ui-sunny/easyui.css" onclick="changeTheme(this)" >主题四</div>
        <div theme="/easyui/themes/bootstrap/easyui.css" onclick="changeTheme(this)" >主题五</div>
        <div class="menu-sep"></div> <!-- 分割线效果-->
    </div>
    <div id="content">
        <div onclick="indexUpdatePassword()" >修改密码</div>
        <div class="menu-sep"></div> <!-- 分割线效果-->
        <div onclick="northLogout()">退出系统</div>
    </div>
</div>
<div id="indexUpdatePasswordDialog" class="easyui-dialog" style="width:600px;height:auto;padding:10px 20px" closed="true">
    <form class="layui-form layui-form-pane" lay-filter="indexPasswordFrom" action="" id="indexPasswordFrom">
        <div class="layui-form-item">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-block">
                <input type="password" name="oldPassword" lay-verify="required|verifyOldPassword" autocomplete="off" placeholder="请输入旧密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPassword" lay-verify="required|verifyPasswordLength" autocomplete="off" placeholder="请输入新密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPassword2" lay-verify="required|confirmPass" autocomplete="off" placeholder="再次确认密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="indexModifyPasswordBtn">立即修改</button>
            </div>
        </div>
    </form>
</div>

</body>
<script th:inline="none" type="text/javascript">
    loadTree();
    layui.use("form",function () {
      var indexmodifyForm= layui.form;
        //监听提交
        indexmodifyForm.on('submit(indexModifyPasswordBtn)', function(indexPasswordFromData){
            $.ajax({
                url:"/user/selfModifyPassword",
                data:indexPasswordFromData.field,
                success:function (data) {
                    if (data.statu==200){
                        //清空表单中的所有数据
                        $("#indexPasswordFrom")[0].reset();//indexmodifyForm.render();
                     windowsOperation("indexUpdatePasswordDialog",null,data);
                    }else if (data.statu==500){
                        windowsOperation(null,null,data);
                    }

                },
                error:function (data) {
                    data={"message":"系统维护中，请稍候再试"}
                    windowsOperation(null,null,data);
                }
            })
            return false;//不跳转页面
        });

        //验证密码长度
        indexmodifyForm.verify({
            verifyPasswordLength:function(value){ //这个是在lay-verify上使用的:要多个验证以'|'分隔
                var len=/^\w{6,15}$/;
                if (!len.test(value)){
                    return '长度必须在6-15之间！';
                }
            }
        });

        //验证密码是否正确
        indexmodifyForm.verify({
            verifyOldPassword:function(value){ //这个是在lay-verify上使用的:要多个验证以'|'分隔
               var result= commonAjax("post","/user/getPassword",{password:value});
                if (result.data<=0){
                    return '输入的旧密码不正确！';
                }
            }
        });

        //验证新密码是否一致
        indexmodifyForm.verify({
            confirmPass:function(value){ //这个是在lay-verify上使用的:要多个验证以'|'分隔
                if($('input[name=newPassword]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });

    })

    function loadTree() {
        $.ajax({
            url: '/manage/menu/opalmenu',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                data.list.forEach(function (val) {
                   val.state="closed"
                    val.children.forEach(function (v) {
                        v.iconCls="icon-script"
                    })

                })
                if (data.statu == 200) {
                    $('#index_tree').tree({
                        data: data.list,
                        onClick: function (node) {
                            var children = node.children;
                            if (children == null || children.length == 0) {
                                openTabs($("#mytabs"), node.text, node.urlPath);
                            }
                        }
                    });
                } else {
                    windowsOperation(null, null, data);
                    northLogout();

                }
            }
        })

    }
    function indexUpdatePassword(){
        $("#indexUpdatePasswordDialog").dialog("open").dialog('setTitle', '修改密码');
    }

    function northLogout() {
        window.location.href = "/user/tologin";
    }

    function sessionCloseDialog(content, obj, name) {
        if (content.indexOf("登录已过期，请重新登录！") >-1) {
            obj.dialog('close', name);
            warnSessionConfirm();
        }
    }
    //导入第三方模块treeTable
    layui.config({
        base: '/layui-v2.5.6/'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use(['treeTable'], function () {
        var treeTable = layui.treeTable;

    });

    function changeTheme(a) {
       var themeUrl= a.getAttribute("theme");
        document.getElementById("systemthemeLink").href=themeUrl
    }


</script>

</html>